<template>
  <div class="study-question correct-question sentence-correct-question">
    <div
      v-if="sentenceData.questionType == 0 || sentenceData.questionType == 2"
    >
      <div class="study-sentence">
        <div class="study-sentence-content">
          {{ sentenceData.sentence }}
        </div>
        <div class="study-sentence-question">
          <div class="study-sentence-word">
            <span v-for="(item, index) in answerList" :key="index">
              <!-- 标点符号 -->
              <span v-if="item.isPunctuation"> {{ item.trueWord }}&nbsp; </span>
              <span
                class="click ml5"
                v-else-if="item.checkedOption"
                @click="cancellOption(item)"
              >
                {{ item.checkedOption.word }}
              </span>
              <span class="ml5" v-else>___</span>
            </span>
          </div>
          <AudioPlay
            class="fr click"
            ref="audioPlay"
            :type="1"
            :audioSrc="baseURL + sentenceData.audioURL"
          ></AudioPlay>
        </div>
        <div class="study-line"></div>
        <div class="study-bottom">
          <div class="study-bottom-two study-bottom-options">
            <div class="study-bottom-left">
              <div class="paraphrase">
                {{ sentenceData.paraphrase }}
              </div>
              <div class="options">
                <div
                  class="options-item click"
                  v-for="(item, index) in optionList"
                  :key="index"
                  @click="checkWordOption(item)"
                  :class="item.isChecked ? 'item-hidden' : ''"
                >
                  <div>
                    {{ item.word }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="sentenceData.questionType == 1">
      <div class="correct-title correct-title-center">
        <span class="word-name mr20 click" @click="playAudio">
          {{ sentenceData.sentence }}
        </span>
        <div class="word-img click ml20">
          <AudioPlay
            ref="audioPlay"
            :type="1"
            :audioSrc="baseURL + sentenceData.audioURL"
          ></AudioPlay>
        </div>
      </div>
      <div class="correct-contain">
        <div class="click-bg" v-if="!isChecked" @click="clickParaphrase">
          点击查看释义
        </div>
        <div v-else class="paraphrase" @click="playAudio">
          {{ sentenceData.paraphrase }}
        </div>
      </div>
    </div>
    <div v-if="sentenceData.questionType == 3">
      <div class="correct-title">
        <span class="word-name mr20 click" @click="playAudio">
          {{ sentenceData.sentence }}
        </span>
        <div class="word-img click ml20">
          <AudioPlay
            ref="audioPlay"
            :type="1"
            :audioSrc="baseURL + sentenceData.audioURL"
          ></AudioPlay>
        </div>
      </div>
      <div class="input-word">
        <div v-if="!isChecked">
          <el-input
            @paste.native.capture.prevent="$handlePaste"
            ref="wordInput"
            v-model="inputWord"
            placeholder=""
            :disabled="isChecked"
          >
          </el-input>
        </div>

        <div v-if="isChecked" class="wordInput">
          <span
            class="el-input__inner"
            :class="isChecked && !inputCheckAnswer ? 'input-false' : ''"
            >{{ inputWord }}</span
          >
          <img
            v-if="isChecked && inputCheckAnswer"
            src="@/assets/img/true-b.png"
            alt=""
          />
          <img
            v-if="isChecked && !inputCheckAnswer"
            src="@/assets/img/false-b.png"
            alt=""
          />
        </div>
        <p class="word-par">{{ sentenceData.paraphrase }}</p>
      </div>
    </div>
  </div>
</template>
<script>
import AudioPlay from "@/components/AudioPlay";
import { setSentenceToWord } from "@/assets/js/sentence2word";
export default {
  data() {
    return {
      inputWord: "",
      isFirstCheck: true,
      inputCheckAnswer: null,
      isChecked: false,
      wordList: [],
      optionList: [],
      answerList: [],
    };
  },
  components: {
    AudioPlay,
  },
  methods: {
    randomOptionList(arr, number) {
      if (!number && number != 0) {
        number = 10;
      }
      let data = this._.shuffle(arr);
      number--;
      if (data.length > 1 && number) {
        let isSample = data.every((item, index) => {
          return item == arr[index];
        });
        console.log(isSample);
        while (isSample) {
          return this.randomOptionList(arr, number);
        }
      }
      return data;
    },
    // 切分处理句子
    setWordList() {
      let result = setSentenceToWord(this.sentenceData.sentence);
      this.wordList = result.wordList;
      this.optionList = result.optionList;
      this.answerList = result.answerList;
    },
    clickParaphrase() {
      this.isChecked = true;
      this.playAudio();
    },
    playAudio() {
      if (this.$refs.audioPlay) {
        this.$refs.audioPlay.playAudio();
      }
    },

    focusWordInput() {
      if (this.$refs.wordInput) {
        this.$refs.wordInput.focus();
      }
    },

    matchingCompleteChar() {
      return this.sentenceData.wordName.trim() == this.inputWord.trim();
    },
    // 校验默写句子操作
    checkedInputWord() {
      let result = true;
      let trueAnswer = this.sentenceData.sentence.trim();
      let stuAnswer = this.inputWord.trim();
      result = trueAnswer == stuAnswer;
      this.isChecked = true;
      this.inputCheckAnswer = result;
      if (!result) {
        this.playAudio();
      }
    },
    // 清空输入框
    emptyInput() {
      this.inputWord = "";
      this.isChecked = false;
      this.$nextTick(() => {
        this.focusWordInput();
      });
    },
    // 监听回车
    watchKeyUp(e) {
      if (this.sentenceData.questionType != 3) return;
      if (e.keyCode == 13) {
        // isFirstCheck
        if (!this.inputWord) {
          //没有输入单词提示请输入单词
          console.log("输入单词");
          return;
        }
        if (this.inputWord && !this.isChecked) {
          //校验输入单词
          this.checkedInputWord();
          return;
        }
        if (this.inputWord && this.isChecked && this.inputCheckAnswer) {
          //校验结果正确，下一题
          this.$emit("nextWord");

          return;
        }
        if (this.inputWord && this.isChecked && !this.inputCheckAnswer) {
          //校验结果错误，清空输入框
          this.emptyInput();
          return;
        }
      }
    },
    // 选择单词选项
    checkWordOption(option) {
      if (option.isChecked) return;
      if (this.isCheckedSentence) {
        let isEmpty = this.answerList.every((item) => {
          return !item.checkedOption;
        });
        if (isEmpty) {
          this.isCheckedSentence = false;
        } else {
          return;
        }
      }
      if (this.isShowSentence) {
        this.isShowSentence = false;
      }

      if (this.isShowParaphrase) {
        this.isShowParaphrase = false;
      }
      this.checkedTheWord(option);
    },
    checkedTheWord(option) {
      for (let i = 0; i < this.answerList.length; i++) {
        let item = this.answerList[i];
        if (!item.isPunctuation && !item.checkedOption) {
          if (option.word == item.trueWord) {
            //   答对
            item.checkedOption = option;
            option.isChecked = true;
            let isCheck = this.answerList.every((item) => {
              return item.checkedOption || item.isPunctuation;
            });
            if (isCheck) {
              this.$emit("nextWord");
            }
          } else {
            this.isShowSentence = true;
            this.playAudio();
          }
          break;
        }
      }
    },
    // 移除选中单词
    cancellOption(answerData) {
      this.optionList.forEach((item) => {
        if (item.index == answerData.checkedOption.index) {
          item.isChecked = false;
        }
      });
      answerData.checkedOption = null;
    },
    initCompon() {
      this.inputWord = "";
      this.isFirstCheck = true;
      this.inputCheckAnswer = null;
      this.isChecked = false;
      this.setWordList();
      this.$nextTick(() => {
        this.focusWordInput();
      });
    },
  },
  mounted() {
    window.addEventListener("keyup", this.watchKeyUp);
  },
  beforeDestroy() {
    window.removeEventListener("keyup", this.watchKeyUp);
  },

  props: {
    sentenceData: {
      type: Object,
    },
  },
  watch: {
    sentenceData() {},
  },
};
</script>